<template>
	<view v-if="ShowHidden" class="my-obscuredGlass">
		<view class="model" :style="{'background':Background,'color':Color}">
			<view class="title">
				{{Title}}
			</view>
			<!-- 状态为1 2 确认需求------------------------ -->
			<view class="content" v-if="Content.orderStatus==1||Content.orderStatus==2">
				<view style="text-align: center;margin-bottom: 15rpx;font-weight: 700;">
					请您确认价格，并且上传方案及结算凭证
				</view>
				<!-- 		<view style="font-size: 24rpx;margin: 15rpx 0;"
					@click="callup(Content.cooperation_type==1?Content.adminMobile:Content.storeMobile)">
					<view style=" color: #C30000;">如果价格有问题，您可联系我方工作人员</view>
					<text>{{`${Content.cooperation_type==1?Content.adminName:Content.storeName}:`||'--'}} </text>
					<u style="color: #007B46;">
						<text>{{`${Content.cooperation_type==1?Content.adminMobile:Content.storeMobile}`||'--'}}</text></u>
				</view> -->
				<view class="dashed">
				</view>
				<view class="inventoryStyle" style="margin: 15rpx 0;" v-for="(item,index) in detailsList" :key="index">
					<view
						style="display: flex;justify-content: space-between;align-items: center; font-size: 30rpx;font-weight:700;">
						<text>
							{{item.class_b||'--'}}
						</text>
						<text>
							{{`方量：${item.square||'--'}${item.company}`}}
						</text>
					</view>
					<view style="font-size: 24rpx;color: #999; margin: 10rpx 0;">
						<text style="word-break: break-all;">{{item.title||'--'}}</text>
					</view>
					<view style="color: #C30000; margin-bottom: 5rpx;">请确认或输入您的出货价格</view>
					<uni-easyinput :disabled="Content.cooperation_type==1" :clearable="false" trim="all" type="digit"
						v-model="item.total_cost" @input="PriceInput($event,item)" @focus="PriceFocus($event,item)"
						@change="PriceChange($event,item)" placeholder="请输入金额"></uni-easyinput>
				</view>
				<view class="dashed">
				</view>
				<view style="margin: 15rpx 0;">
					<view style="text-align: end;">项目清单数量：{{Content.num||'--'}}</view>
					<view style="text-align: end;">总计价格：{{`${Content.totaPrice||'0.00'}元`}}</view>
				</view>
				<view class="dashed">
				</view>
				<view style="margin: 15rpx 0;">
					<view>预计可配送时间：{{timestampToTime_D(Content.generation_completion_time)||'--'}}</view>
					<view>预计安装完成时间：{{timestampToTime_D(Content.installation_time)||'--'}}</view>
					<view style="color: #C30000;font-size: 20rpx;">若不提供配送或安装，可忽略</view>
				</view>
				<view class="dashed">
				</view>
				<view style="font-size:30rpx;font-weight: 700;margin: 20rpx 0;">
					附件资料(测量数据或方案，若无请忽略)
				</view>
				<view style="width: 100%;display: flex; flex-wrap: wrap;">
					<!-- 图片预览列表 -->
					<view class="flex_cloumn" style="position: relative; width: 140rpx;margin: 10rpx 15rpx;"
						v-for="(ItemImg,index) in Content.annexImg" :key="index">
						<image style="width: 140rpx;height: 140rpx;" :src="ItemImg.url" mode=""
							@click="previewpictures(ItemImg.url)">
						</image>
						<view class="flex_center" style="font-size: 24rpx;">
							{{ItemImg.title}}
						</view>
						<view v-if="ItemImg.title=='供应商上传'" style="position: absolute;top:-20rpx;right: -10rpx;"
							@click="deletImg(index)">
							<image style="width: 40rpx;height: 40rpx;" src="@/static/images/删除.png" mode=""></image>
						</view>
					</view>
					<!-- 添加图片 -->
					<view style="width: 140rpx;margin: 10rpx 15rpx;" @click="addImg">
						<image style="width: 140rpx;height: 140rpx;" src="@/static/images/Slice8.png" mode=""></image>
						<view class="flex_center" style="font-size: 24rpx;">
							添加图片
						</view>
					</view>
				</view>
			</view>
			<!--  状态为3 确认生产--------------------------- -->
			<view class="content" v-if="Content.orderStatus==3">
				<view style="margin: 50rpx 0;color: #606266;">
					确认已开始备货或生产
				</view>
			</view>
			<!--状态为4 确认生产或备货完成，产品处于可配送状态----------- -->
			<view class="content" v-if="Content.orderStatus==4">
				<view class="flex_column" style="margin: 50rpx 0; color: #606266;">
					<view>若已配送完成，请勾选配送完成按钮，若没有则忽略</view>
					<checkbox-group @change="checkedChange">
						<label>
							<checkbox style="transform:scale(0.7)" color="#007a45" :checked="checkedValue" />
						</label>
					</checkbox-group>
				</view>
			</view>
			<!--状态为5  确认生产--------------------------- -->
			<view class="content" v-if="Content.orderStatus==5">
				<view style="margin: 50rpx 0;color: #606266;">
					请确认配送已完成
				</view>
			</view>
			<!-- 底部公共确认------------------------ -->
			<view class="button">
				<view class="cancel" @click="cancelEvent1">
					取消
				</view>
				<view class="confirm" @click="confirmEvent1">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		SCM_save_update_price
	} from '@/api/api.js' //引入api接口
	export default {
		name: 'my-obscuredGlass',
		props: {
			ShowHidden: {
				type: Boolean,
				default: false
			},
			Background: {
				type: String,
				default: '#FFF'
			},
			Color: {
				type: String,
				default: '#111'
			},
			Title: {
				type: String,
				default: '提示'
			},
			Content: {
				type: Object,
				default: {}
			},
			// 清单
			detailsList: {
				type: Array,
				default: []
			},
			//总价
			totalPrice: {
				type: Number,
				default: 0
			},
			// 图片
			addImgList: {
				type: Array,
				default: []
			},

		},
		data() {
			return {
				crtPrice: null,
				crtId: null,
				checkedValue: true ///默认选择配送完成
			};
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			// 日期处理公共 方法
			timestampToTime_D(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + "/";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "/";
				var D = date.getDate()
				return Y + M + D
			},
			// 点击拨打电话
			callup(tel) {
				if (tel) {
					uni.makePhoneCall({
						phoneNumber: tel //仅为示例
					});
				}
			},

			// 预览图片
			previewpictures(ItemImg) {
				uni.previewImage({
					urls: [ItemImg],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			// 修改价格 focus
			PriceFocus(e, item) {
				//记录原本的数据
				this.crtPrice = e.detail.value
				this.crtId = item.id
			},

			// 修改价格 change
			PriceChange(e, item) {
				console.log('修改价格change', e, item);
				console.log('this.crtPrice ,this.crtId', this.crtPrice, this.crtId);
				if (e && e > 0) {
					// 调接口
					this.updatePrice([{
						id: item.id,
						total_cost: e
					}]);
				} else {
					this.detailsList.forEach((ele, index) => {
						if (ele.id == this.crtId) {
							ele.total_cost = this.crtPrice
						}
					})
					uni.showToast({
						icon: 'none',
						title: '成本为0，无法通过，修改成本和单据一致'
					})
				}
			},

			// 修改价格 input
			PriceInput(e, item) {
				console.log('e', e);
				// 保留两位小数
				this.detailsList.forEach((ele, index) => {
					if (ele.id == this.crtId) {
						this.$nextTick(() => {
							ele.total_cost = e.match(/^\d*(\.?\d{0,2})/g)[0] || null;
						})
					}

				})
			},
			// 修改价格接口
			async updatePrice(arr) {
				const params = {
					id: this.Content.id, //供应链子订单id
					list: arr //修改清单价格
				}
				const res = await SCM_save_update_price(params)
				if (res && res.code == 0) {
					console.log('修改价格接口', res);
					this.Content.totaPrice = res.data.all_cost
					uni.showToast({
						icon: 'success',
						title: '更新成功'
					})
				}
			},
			// 上传图片------
			addImg() {
				this.$emit('addImg')
			},
			// 删除
			deletImg(index) {
				this.$emit('deletImg', index)
			},
			// 是否开始配送 选择框
			checkedChange(e) {
				this.checkedValue = !this.checkedValue
				this.$emit('checkedChange', this.checkedValue)
			},
			cancelEvent1() {
				this.$emit('cancelEvent1')
			},
			confirmEvent1() {
				this.$emit('confirmEvent1')
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-obscuredGlass {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 101;
		backdrop-filter: blur(20rpx);
		display: flex;
		justify-content: center;
		align-items: center;

		.model {
			width: 80%;
			height: 70%;
			overflow-y: auto;
			padding: 30rpx;
			display: flex;
			border-radius: 20rpx;
			box-shadow: #aaa 0 0 20rpx;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.dashed {
				border-top: 2rpx dashed #999;
			}

			.content {
				font-size: 26rpx;
				margin: 25rpx 0;
			}

			.button {
				position: sticky;
				bottom: 0;
				width: 100%;
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #FFF;

				.cancel {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 45%;
					height: 100%;
					border-radius: 70rpx;
					border: 1px solid #007B46;
					background: #FFF;
					color: #007B46;
				}

				.confirm {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 45%;
					height: 100%;
					border-radius: 70rpx;
					background: #007B46;
				}
			}
		}

	}
</style>